<template>
	<view class="box" :style="{background:color}">
		<!-- <button v-on:click="onClick"></button> -->
		<!-- {{num}} -->
		<button type="primary" @click="onClick">随机改变颜色</button>

		<switch checked="false" @change="onChange" />控制按钮loading
		<button type="warn" :loading="Onloading">按钮</button>

		<!-- 页面跳转法一 -->
		<navigator url="/pages/demo2/demo2">页面跳转</navigator>



		<!-- {{arrs}} -->
		<view class="layout">
			<view class="row" v-for="item in arrs" :key="item.id">
				<view class="title">
					{{item.title}}
				</view>
				<view class="content">
					{{item.body}}
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	// 随机变色

	import {
		ref
	} from "vue"

	const num = ref(1)
	const color = ref("#efefef")
	const Onloading = ref(true)

	function onClick() {
		// num.value += 1
		// console.log(123)
		// console.log(num.value)

		color.value = "#" + String(Math.random()).substring(3, 9)

		console.log(String(Math.random()).substring(3, 9))




	}

	function onChange(e) {
		// console.log(e)
		console.log(e.detail.value)
		Onloading.value = e.detail.value
	}

	const arrs = ref([])

	function request1() {

		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
			success: res => {

				// console.log(res)
				arrs.value = res.data
			}
		})
	}
	
	function request2() {
	
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
		}).then(res=>
	
		arrs.value = res.data
		)
	}
	
	async function request3() {
	
		let res = await uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
		})
	
		arrs.value = res.data
		
	}
	
	
	// request1()
	// request2()
	request3()
	
	console.log("done!")
	
	
</script>

<style>
	.box {
		width: 200px;
		height: 200px;
		background-color: orange;
	}

	.layout {
		padding: 30rpx;

		.row {
			border-bottom: 1px solid #cfcff;
			padding: 20rpx 0;

			.title {
				font-size: 32rpx;


				color: #333333;

			}

			.content {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
</style>